<template>
    <div v-if="dialogVisible" class="back">
            <!--打印区域开始-->
            <div class="print-area" ref="print">

                <div class="table-container">
                    <div class="row flex">
                        <div class="cell w3 f7">送货清单</div>
                        <div class="cell f2 w3"></div>
                    </div>
                    <div class="row flex">
                        <div class="cell w3 f1">发货日期：</div>
                        <div class="cell w3 f5"></div>
                        <div class="cell f1 w3">联系人1</div>
                        <div class="cell f2 w3">
                            <div>方亮 </div>
                            <div>13253998080</div>
                        </div>
                    </div>
                    <div class="row flex">
                        <div class="cell w3 f1">发货单位：</div>
                        <div class="cell w3 f5">陕西重型汽车进出口有限公司</div>
                        <div class="cell f1 w3">联系人2</div>
                        <div class="cell f2 w3">
                            <div>鄢立朋 </div>
                            <div>15060250919</div>
                        </div>
                    </div>
                    <div class="row flex">
                        <div class="cell f1">收货单位</div>
                        <div class="cell f5">福建宁穗安物流有限公司</div>
                        <div class="cell f1"></div>
                        <div class="cell f2"></div>
                    </div>
                    <div class="row flex">
                        <div class="cell f1">箱件号</div>
                        <div class="cell f2">货物名称</div>
                        <div class="cell f2">规格</div>
                        <div class="cell f1">单位</div>
                        <div class="cell f1">数量</div>
                        <div class="cell f2">备注</div>
                    </div>
                    <div class="row flex" v-for="(item,idx) in boxLists" :key="idx">
                        <div class="cell f1 ">{{item.packingOrderNumber}}</div>
                        <div class="cell f2">{{item.packingOrderNumber ? '汽车配件' : ''}}</div>
                        <div class="cell f2">{{item.lwh}}</div>
                        <div class="cell f1">{{item.packingOrderNumber ? '件' : ''}}</div>
                        <div class="cell f1">{{item.packingOrderNumber ? 1 : ''}}</div>
                        <div class="cell f2">{{item.grossWeight}}</div>
                    </div>
                    <div class="row flex">
                        <div class="cell f1">收货地址：</div>
                        <div class="cell f6">张家港大新镇港新重装码头港务有限公司</div>
                        <div class="cell f2"></div>
                    </div>
                    <div class="row flex">
                        <div class="cell f1">注：</div>
                        <div class="cell f6">直接导航收货地址，公司二号门进</div>
                        <div class="cell f2"></div>
                    </div>

                </div>
            </div>
            <!--打印区域结束-->
            <span  class="dialog-footer">
            <el-button @click="$emit('close')">取 消</el-button>
            <el-button type="primary" @click="print">打印</el-button>
          </span>

    </div>
</template>

<script>
    export default {
        name:'print',
        props: ['boxList', 'total', 'dialogVisible'],
        computed: {
            boxLists() {
                const MAX_ROW = 25;
                if(this.boxList && this.boxList.length < MAX_ROW) {
                    const loopTimes = MAX_ROW - this.boxList.length;
                    const boxList = [...this.boxList];
                    for (let i = 0;i < loopTimes;i++) {
                        boxList.push({});
                    }
                    return boxList;
                } else {
                    return this.boxList;
                }
            }
        },
        methods: {
            print() {
                this.$print(this.$refs.print);
            }
        },
    }
</script>

<style scoped lang="scss">
    .back{
        text-align: center;
        position: fixed;
        overflow: scroll;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        background: white;
        border: 1px solid #ddd;
        box-shadow: 5px 5px 5px #ddd;
        z-index: 9999;
    }
    .print-area {
        margin-left: 50%;
        transform: translateX(-50%);
        text-align: center;
        font-size: 14px;
        border: 1px solid #000;
        width: 210mm;
        /*height: 210mm;*/
        .w3{
            height: 48px;
            line-height: 48px;
            div{
                line-height: 24px;
            }
        }
        .table-container{
            .row{
                border-bottom: 1px solid #000;
                min-height: 20px;
                .cell{
                    border-right: 1px solid #000;
                }
            }
        }
        .flex{
            display: flex;
            .f1{
                flex: 1;
            }
            .f2{
                flex: 2;
            }
            .f3{
                flex: 3;
            }
            .f4{
                flex: 4;
            }
            .f5{
                flex: 5;
            }
            .f6{
                flex: 6;
            }
            .f7{
                flex: 7;
            }
        }
    }

    @media print {
        html, body {
            width: 210mm;
            /*height: 210mm;*/
        }
        .print-area {
            width: 210mm;
            /*height: 210mm;*/
            border-top: 1px solid #000;
            text-align: center;
            .w3{
                height: 48px;
                line-height: 48px;
                div{
                    line-height: 24px;
                }
            }
            .table-container{
                border-left: 1px solid #000;
                .row{
                    border-bottom: 1px solid #000;
                    min-height: 20px;
                    .cell{
                        border-right: 1px solid #000;

                    }
                }
            }
            .flex{
                display: flex;
                .f1{
                    flex: 1;
                }
                .f2{
                    flex: 2;
                }
                .f3{
                    flex: 3;
                }
                .f4{
                    flex: 4;
                }
                .f5{
                    flex: 5;
                }
                .f6{
                    flex: 6;
                }
                .f7{
                    flex: 7;
                }
            }
        }
    }
</style>